import React from 'react';
import * as _ from '../../util/public/common';

export default class Main extends React.Component{
    componentDidMount(){
        this.bindEvent();
    }
    componentDidUpdate(){
        this.bindEvent();
    }
    bindEvent(){
        jQuery('.wf-error-msg-detail .condition').each(function(){
			var _a = jQuery(this).attr('index');
			if(!jQuery.isEmptyObject(_a)){
				jQuery(this).hover(
					function(){
						jQuery('#condit'+_a).css('display','block');
						jQuery('#condit'+_a).css('left',window.event.clientX);
					},
					function(){
						jQuery('#condit'+_a).css('display','none');
					}
				);
			}
		});
    }
    render(){
        const { title,detail,bottom } = this.props;
        return (
            <div className="wf-error-msg">
                <div className="wf-error-msg-left">
                    <i className="icon-coms02-Warning-01" />
                </div>
                <div className="wf-error-msg-right">
                    <div className="wf-error-msg-title">{title}</div>
                   {detail&& <div className="wf-error-msg-detail" dangerouslySetInnerHTML={{__html:detail}}></div>}
                    {
                        bottom && <div className="wf-error-msg-bottom" dangerouslySetInnerHTML={{__html:bottom}}></div>
                    }
                </div>
            </div>
        )
    }
}